<template>
    <div class="student">
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <h1>联系电话:{{ tel }}</h1> <!--{{  }} 叫插值语法-->
        <!-- 无序列表 <ul>标签 -->

         <ul>
            <!-- 【v-for="元素 in 数组" 】是vue中的一个属性，可以循环遍历数组 -->
            <!-- 【v-for="(元素,索引值) in 数组" 】是vue中的一个属性，可以循环遍历数组 -->
            <li v-for="(like,i) in likes" :key="i">{{ i }}==>{{ like }}</li><!-- 列表项 -->
         </ul>
         <!-- 像input这种通过value属性进行赋值和取值的标签，就不能使用插值语法赋值 -->
          <!-- 所以要使用单项绑定 v-bind -->
         <!-- <input type="text" name="myCar" id="myCar" :value="car"/> -->
         <!-- 通过v-model可以实现双向的绑定 直接用v-model="变量名"-->
         双向绑定：<input type="text" name="myCar02" id="myCar02" v-model="myCar02"/>

         <h1>{{ myCar02 }}</h1>
         单向绑定：<input type="text" name="myCar" id="myCar" :value="myCar02"/>
    </div>
</template>

<script setup lang="ts" name="Student">
    //1、引入ref
    import {ref} from 'vue'
    let car=ref("奔驰")
    let name = ref('学生张三');
    let age = ref(666); 
    let tel = 13636363366;
    let likes=ref(
        [
            "学习","看书","abac","烫头"
        ]
    )
    let myCar02=ref("奔驰")
    console.log(myCar02.value);

</script>


<style scoped>
.student {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
